<script>
import store from "../../../../store"
import { userActionType } from "../../../../store/modules/user"
import request from "../../../../utils/request"
import { getShowImage, showModal } from "../../../../utils"
import refreshIcon from "../assets/refresh.png"
import chooseDailyCount from "./chooseDailyCount.vue"
import chineseToEnglishIcon from "../assets/chineseToEnglish.png"
import englishToChineseIcon from "../assets/englishToChinese.png"
import dict, { dictActionType } from "../../../../store/modules/dict"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"

export default {
  name: "modifyCurrent",
  components: { chooseDailyCount },
  data() {
    return {
      //当前计划
      currentPlanInfo: null,
      //当前选中的每日背单词数量
      currentSelectCount: 0,
      refreshIcon,
      // 练习模式图标列表
      practiceModeListIcon: [
        {
          key: "中考英",
          value: chineseToEnglishIcon,
        },
        {
          key: "英考中",
          value: englishToChineseIcon,
        },
      ],
      dict: {
        practiceModeList: [],
      },
    }
  },
  async created() {
    const dict = await store.dispatch(dictActionType.actions.dict)
    this.dict.practiceModeList = dict.practiceModeList
  },
  computed: {
    currentSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
  },
  methods: {
    getShowImage,
    async init() {
      //获取当前选择的计划
      if (!this.currentSelectExamId) {
				uni.showLoading({ title: "加载中" })
        await store.dispatch(userActionType.action.examInfo)
				uni.hideLoading()
      }
      request({
        url: "userCheckPlan/getUserCurrentlyPlan",
        data: {
          examId: this.currentSelectExamId,
        },
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        this.currentPlanInfo = data
        //回显每日打卡单词数量选择器数据
        this.$nextTick(() => {
          this.$refs.chooseDailyCount && this.$refs.chooseDailyCount.echoData(data.dailyWordCount)
        })
      })
    },
    async submit() {
      await request({
        showLoading: true,
        errorHandle: true,
        url: "userCheckPlan/edit",
        data: {
          planId: this.currentPlanInfo.planId,
          examId: this.currentSelectExamId,
          dailyWordCount: this.currentSelectCount,
          practiceMode: this.currentPlanInfo.practiceMode,
        },
      })
      this.$emit("backToLearningPage", this.currentPlanInfo.thesaurusCategory)
    },
    //重置当前的计划的进度
    async resetCurrentPlan() {
      if (
        !(await showModal({
          title: "提示",
          content: "确定要重置吗？这将会使当前计划的进度清零",
        }))
      )
        return
      await request({
        url: "userCheckPlan/resetPlan",
        data: {
          planId: this.currentPlanInfo.planId,
        },
        errorHandle: true,
        showLoading: true,
      })
      this.$emit("backToLearningPage", this.currentPlanInfo.thesaurusCategory)
    },
  },
  emits: ["backToLearningPage"],
}
</script>

<template>
  <view class="component" v-if="currentPlanInfo">
    <!--		当前选择的词库-->
    <view class="user-plan-item">
      <image class="icon" :src="getShowImage(currentPlanInfo.thesaurusImg)"></image>
      <view class="right">
        <view class="header">
          <!--						题库标题-->
          <view class="title">{{ currentPlanInfo.thesaurusName }}</view>
          <view class="reset" @click="resetCurrentPlan">
            <image :src="refreshIcon" class="icon"></image>
            重置
          </view>
        </view>
        <!--					学习进度-->
        <view class="process">当前已学 {{ currentPlanInfo.currentDay - 1 }} 天</view>
        <view class="process-bar">
          <view class="content" :style="'width:' + (currentPlanInfo.studyWordNum / currentPlanInfo.thesaurusNum) * 100 + '%'"></view>
        </view>
        <view class="process-footer">
          <view>已学单词</view>
          <view>{{ currentPlanInfo.studyWordNum }} / {{ currentPlanInfo.thesaurusNum }}</view>
        </view>
      </view>
    </view>
    <!--		计划一天要背多少个单词-->
    <!--		带背类型词库不展示-->
    <view class="schedule" v-if="currentPlanInfo.thesaurusCategory !== 'Racked'">
      <choose-daily-count
        ref="chooseDailyCount"
        :remainWordCount="currentPlanInfo.thesaurusNum - currentPlanInfo.studyWordNum"
        @change="
          (val) => {
            currentSelectCount = val
          }
        "
      ></choose-daily-count>
    </view>
    <!--		更改背单词的练习模式-->
    <view class="block practice-mode-choose" v-if="currentPlanInfo">
      <view class="title">练习模式</view>
      <view class="practice-list">
        <view
          class="practice-item"
          v-for="item in dict.practiceModeList"
          :key="item.value"
          :class="[currentPlanInfo.practiceMode === item.value ? 'active' : 'inactive']"
          @click="currentPlanInfo.practiceMode = item.value"
        >
          <image class="icon" :src="practiceModeListIcon.find((element) => element.key === item.value).value"></image>
          <view class="text">{{ item.label }}</view>
        </view>
      </view>
    </view>
    <view class="placeholder"></view>
    <!--		提交按钮-->
    <view class="submit-btn" @click="submit"> 提交</view>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: {
    top: 30rpx;
    left: 30rpx;
    right: 30rpx;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
  }

  .block {
    background: white;
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .user-plan-item {
    padding: 30rpx;
    display: flex;
    background: white;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 0 10rpx #e8e8e8;

    > .icon {
      width: 130rpx;
      height: 150rpx;
    }

    > .right {
      width: 0;
      flex: 1;
      margin-left: 30rpx;

      > .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 34rpx;

        > .title {
          width: 0;
          flex: 1;
          //文本溢出部分自动加省略号
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: var(--text-color);
          font-weight: 500;
        }

        > .reset {
          font-size: 32rpx;
          display: flex;
          align-items: center;
          color: var(--text-color-light);

          .icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
          }
        }
      }

      > .process {
        font-size: 28rpx;
        margin-top: 20rpx;
        color: var(--text-color);
      }

      > .process-bar {
        margin-top: 20rpx;
        height: 10rpx;
        background: var(--border-color);
        border-radius: 10rpx;

        > .content {
          border-radius: 10rpx;
          height: 100%;
          width: 0;
          background: var(--theme-color);
        }
      }

      > .process-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        color: var(--text-color-light);
        font-size: 28rpx;
      }
    }
  }

  .schedule {
    margin-top: 30rpx;
  }

  .practice-mode-choose {
    margin-top: 30rpx;

    > .title {
      font-size: 36rpx;
      color: var(--text-color);
    }

    .practice-list {
      display: flex;
      margin-top: 20rpx;

      .practice-item {
        width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10rpx 0;
        margin: 30rpx 0;
        border-radius: 20rpx;

        &.active {
          border: 4rpx solid var(--theme-color);
        }

        &.inactive {
          border: 4rpx solid transparent;
        }

        &:not(:last-child) {
          margin-right: 30rpx;
        }

        > .icon {
          width: 100rpx;
          height: 100rpx;
        }

        > .text {
          font-size: 30rpx;
          color: var(--text-color);
          margin-top: 10rpx;
        }
      }
    }
  }

  > .placeholder {
    height: 150rpx;
  }

  .submit-btn {
    width: 600rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background: var(--theme-color);
    border-radius: 50rpx;
    color: var(--text-color-white);
    font-size: 36rpx;
    position: fixed;
    bottom: calc(20rpx + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10rpx #e8e8e8;
  }
}
</style>
